<script lang='ts' setup>
// @ts-ignore
import { Message } from '@arco-design/web-vue'
// @ts-ignore
import { userService } from '~/service/user.service'
// @ts-ignore
import { Link,Dropdown, Doption,Icon,Button } from '@arco-design/web-vue/es/index'
// @ts-ignore
const emits = defineEmits(['close', 'change'])

const username = ref('')
const password = ref('')

function login(): void {
  if (!username.value) Message.error('请先输入邮箱')
  else if (!password.value) Message.error('请先输入密码')
  else
    userService.login(username.value, password.value).then(() => emits('close'))
}
</script>
<template>
  <div class='login'>
    <div class='title flex'>
        <span class='text flex'>邮箱密码登录</span>
    </div>
    <div class='cell tips flex'>
      <Link theme='primary' @click="emits('change', 'register')"> 如果第一次登录，请先注册账号</Link>
    </div>
    <div class='cell flex'>
      <input type='text' placeholder='请输入账号邮箱' v-model='username'>
    </div>
    <div class='cell flex'>
      <input type='password' placeholder='请输入密码' v-model='password'>
    </div>
    <div class='cell tips flex'>
      <Link @click="emits('change', 'login-wx')"> 微信登录</Link>
      <Link @click="emits('change', 'reset')"> 忘记密码</Link>
    </div>
    <button class='cell btn' @click='login'>登录</button>
  </div>
</template>
<style lang='scss' scoped>
.login {
  width: 100%;
  background: var(--color-bg-1);
  padding: 0 50px;
  justify-content: space-between;
}

.title {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 45px;
  justify-content: center;

  .text {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-neutral-10);
    line-height: 33px;
    letter-spacing: 2px;
  }

  .close {
    cursor: pointer;
    font-weight: 600;
    font-size: 25px;
  }
}


.cell {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-neutral-4);
  margin-bottom: 20px;
  overflow: hidden;
  justify-content: space-between;

  .select {
    width: 88px;
    height: 100%;
    font-size: 16px;

    font-weight: 500;
    color: var(--color-neutral-10);
    line-height: 22px;
    letter-spacing: 2px;
    text-align: center;
  }

  input {
    height: 100%;
    flex: 1;
    padding: 15px 20px;
    color: var(--color-neutral-10);
  }

  .get-btn {
    padding: 15px 20px;
    height: 50px;
    width: 100%;
  }
}

.tips {
  border: none;
  border-radius: 0;
  font-size: 16px;

  font-weight: 600;
  color: rgb(var(--arcoblue-6));
  line-height: 22px;
  letter-spacing: 1px;
}

.btn {
  background: rgb(var(--arcoblue-6));
  border-radius: 10px;
  border-color: var(--color-bg-1);
  color: #fff;
  height: 52px;
  cursor: pointer;
  margin-bottom: 0;
  margin-top: 25px;
}
</style>
